<template>
  <div class="register-container">
    <!-- 顶部装饰 -->
    <div class="pink-header">
      <div class="header-blob"></div>
    </div>

    <!-- 注册表单 -->
    <div class="form-wrapper">
      <h2 class="form-title">用户注册</h2>
      
      <van-form @submit="onSubmit" class="pink-form">
        <van-field 
          v-model="regForm.name" 
          label="用户名" 
          type="text" 
          placeholder="请输入用户名"
          :rules="[{ pattern:regNamePwd,required: true, message: '3-12位字母数字组合' }]"
          label-class="pink-label"
          left-icon="user-o"
        />
        
        <van-field 
          v-model="regForm.password" 
          label="密码" 
          type="password" 
          placeholder="请输入密码"
          :rules="[{ pattern:regNamePwd,required: true, message: '3-12位字母数字组合' }]"
          label-class="pink-label"
          left-icon="lock"
        />
        
        <van-field 
          v-model="regForm.password2" 
          label="确认密码" 
          type="password" 
          placeholder="请再次输入密码"
          :rules="[{ validator: validatePassword, message: '两次密码不一致' }]"
          label-class="pink-label"
          left-icon="lock"
        />
        
        <van-field 
          v-model="regForm.email" 
          label="邮箱" 
          type="email" 
          placeholder="请输入邮箱"
          :rules="[{ pattern:regEmail, message: '请输入有效的邮箱地址' }]"
          label-class="pink-label"
          left-icon="envelop-o"
        />
        
        <van-field 
          v-model="regForm.phone" 
          label="手机号" 
          type="tel" 
          placeholder="请输入手机号码"
          :rules="[{ pattern:regPhone, message: '请输入有效的手机号码' }]"
          label-class="pink-label"
          left-icon="phone-o"
        />
        
        <van-field 
          name="radio" 
          label="性别" 
          label-class="pink-label"
        >
          <template #input>
            <van-radio-group v-model="regForm.gender" direction="horizontal">
              <van-radio :name="1" checked-color="#ff6b8b">男</van-radio>
              <van-radio :name="0" checked-color="#ff6b8b">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        
        <van-field 
          v-model="regForm.nick_name" 
          label="昵称" 
          type="text" 
          placeholder="请输入昵称"
          label-class="pink-label"
          left-icon="smile-o"
        />
        
        <van-field 
          name="uploader" 
          label="头像" 
          label-class="pink-label"
        >
          <template #input>
            <van-uploader 
              v-model="avatarList" 
              :max-count="1" 
              :after-read="afterRead"
              upload-text="上传头像"
              upload-icon="plus"
              :preview-image="false"
            >
              <template #preview-cover="{ file }">
                <div class="preview-cover">
                  <van-icon name="edit" color="#fff" size="16" />
                </div>
              </template>
            </van-uploader>
          </template>
        </van-field>
        
        <div class="submit-btn">
          <van-button 
            round 
            block 
            type="primary" 
            native-type="submit"
            color="linear-gradient(to right, #ff8a98, #ff6b8b)"
          >
            立即注册
          </van-button>
        </div>
      </van-form>
      
      <div class="register-tips">
        <p>已有账号？<router-link to="/login" class="pink-link">立即登录</router-link></p>
      </div>
    </div>
    
    <!-- 底部装饰 -->
    <div class="pink-footer"></div>
  </div>
</template>

<script>
import { showToast } from 'vant';
import { registerAPI, uploadAvatarAPI } from "@/api/user.js";
import { setUserLocal } from '@/utils/auth';

export default {
  data() {
    return {
      regForm: {
        name: "",
        password: "",
        password2: "",
        email: "",
        phone: "",
        gender: 1,
        avatar: "",
        nick_name: ""
      },
      avatarList: [],
      regNamePwd: /^[a-z0-9]{3,12}$/i,
      regPhone: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
      regEmail: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
    };
  },
  
  methods: {
    validatePassword(val) {
      return val === this.regForm.password;
    },
    
    afterRead(file) {
      file.status = 'uploading';
      file.message = '上传中...';
      
      uploadAvatarAPI(file.file).then(result => {
        file.status = '';
        file.message = '';
        this.avatarList = [{
          url: this.APIDomainName + result.url,
          isImage: true
        }];
        this.regForm.avatar = result.url;
        showToast({
          message: '头像上传成功',
          className: 'pink-toast'
        });
      }).catch(() => {
        file.status = 'failed';
        file.message = '上传失败';
      });
    },
    
    onSubmit() {
      if (this.regForm.password !== this.regForm.password2) {
        showToast({
          message: "两次密码输入不一致",
          className: 'pink-toast-error'
        });
        return;
      }
      
      let user = { ...this.regForm };
      delete user.password2;
      
      registerAPI(user).then(result => {
        setUserLocal(result.data.user);
        showToast({
          message: '注册成功',
          className: 'pink-toast'
        });
        this.$router.push({ name: "login" });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.register-container {
  min-height: 100vh;
  background-color: #fff5f7;
  position: relative;
  padding-bottom: 50px;
}

.pink-header {
  height: 150px;
  background-color: rgba(255, 182, 193, 0.2);
  border-radius: 0 0 50% 50%;
  position: relative;
  overflow: hidden;
  
  .header-blob {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    right: -30px;
    top: -30px;
  }
}

.form-wrapper {
  margin: -60px 20px 0;
  padding: 25px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(255, 107, 139, 0.1);
  position: relative;
  z-index: 2;
  
  .form-title {
    text-align: center;
    color: #ff6b8b;
    font-size: 22px;
    margin-bottom: 25px;
    font-weight: bold;
    letter-spacing: 1px;
  }
}

:deep(.pink-label) {
  color: #ff6b8b !important;
  font-weight: 500;
}

:deep(.van-field__control) {
  color: #666;
}

:deep(.van-uploader) {
  .van-uploader__upload {
    background-color: #ffecef;
    border: 1px dashed #ff6b8b;
  }
  
  .van-uploader__preview-image {
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #ff6b8b;
  }
}

.preview-cover {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background-color: rgba(255, 107, 139, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-btn {
  margin: 30px 0 20px;
}

.register-tips {
  text-align: center;
  color: #888;
  font-size: 14px;
  margin-top: 15px;
  
  .pink-link {
    color: #ff6b8b;
    font-weight: 500;
    text-decoration: none;
  }
}

.pink-footer {
  height: 30px;
  background: linear-gradient(to right, #ff8a98, #ff6b8b);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

// 自定义粉色主题的toast
:deep(.pink-toast) {
  background: linear-gradient(to right, #ff8a98, #ff6b8b);
  color: white;
  border-radius: 20px;
}

:deep(.pink-toast-error) {
  background: #ff4757;
  color: white;
  border-radius: 20px;
}

// 自定义上传样式
:deep(.van-uploader__upload) {
  background-color: #ffecef;
  border-color: #ffb6c1;
  
  .van-uploader__upload-icon {
    color: #ff6b8b;
  }
  
  .van-uploader__upload-text {
    color: #ff6b8b;
  }
}
</style>